<template>
  <div class="app-container">
    <div class="filter-container">
      公司名称：
      <el-input
        v-model="listQuery.name"
        placeholder="公司名称"
        style="width: 200px; margin: 0 10px 0 0"
        class="filter-item"
        @keyup.enter.native="handleSearch"
      />
      创建时间：
      <el-date-picker
        v-model="timeFrame"
        type="datetimerange"
        range-separator=" ~ "
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        align="right"
        style="height: 36px; margin: 0 10px 0 0"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        style="height: 36px; margin: 0 10px 0 0"
        @click="handleReset"
      >
        重置
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        style="height: 36px; margin: 0 10px 0 0"
        @click="addEnterprise()"
      >
        新增
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="height: 36px; margin: 0 10px 0 0"
        @click="handleSearch"
      >
        搜索
      </el-button>
    </div>

    <div class="vehicle-state">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 全部 -->
        <el-tab-pane
          v-for="item in header"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            stripe
            fit
            highlight-current-row
            style="width: 100%"
            @sort-change="sortChange"
          >
            <el-table-column label="选择" prop="sort" align="center" width="80">
              <template slot-scope="{ row }">
                <span>{{ row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="公司名称" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="注册时间" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.createdTime }}</span>
              </template>
            </el-table-column>
            <!--
            <el-table-column label="浦发账户" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="钱包余额" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="钱包状态" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.weight }}</span>
              </template>
            </el-table-column>
            -->
            <el-table-column label="绑定手机号" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.legalPersonMobile }}</span>
              </template>
            </el-table-column>
            <!--
           <el-table-column label="是否开票" align="center">
             <template slot-scope="{ row }">
               <span>{{ row.isInvoice }}</span>
             </template>
           </el-table-column>
           <el-table-column label="开票公司" align="center">
             <template slot-scope="{ row }">
               <span>{{ row.invoiceCompanyName }}</span>
             </template>
           </el-table-column>
           <el-table-column label="开票率" align="center">
             <template slot-scope="{ row }">
               <span>{{ row.invoiceRate }}</span>
             </template>
           </el-table-column>
           -->
            <el-table-column label="合同签署状态" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="账户状态" align="center">
              <template slot-scope="{ row }">
                <span>{{ userStatusMapping[row.userStatus] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核状态" align="center">
              <template slot-scope="{ row }">
                <span>{{ statusMapping[row.status] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开户银行" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.bank }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开户账号" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.bankAccount }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              align="center"
              width="230"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <el-button v-if="row.status === 'PENDING' " type="primary" size="mini" @click="handleAudit(row)">审核</el-button>
                <el-button v-if="row.status === 'SUCCESS' && row.userStatus === 'FROZEN' " type="primary" size="mini" @click="handleUpdateUserStatus(row, 'ACTIVE')">启用</el-button>
                <el-button v-if="row.status === 'SUCCESS' && row.userStatus === 'ACTIVE' " type="primary" size="mini" @click="handleUpdateUserStatus(row, 'FROZEN')">停用</el-button>
                <el-button type="primary" size="mini" @click="handleDetail(row)">详情</el-button>
                <el-button
                  v-if="row.status != 'SUCCESS'"
                  size="mini"
                  type="danger"
                  @click="handleDelete(row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            @pagination="getList"
          />
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import {
  fetchEnterpriseList,
  createEnterprise,
  delEnterprise
} from '@/api/tms/enterprise'
import {
  updateUserStatus
} from '@/api/iam/iamUser'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'
import * as R from 'ramda'

export default {
  name: 'EnterpriseList',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 20,
        name: undefined,
        createdStartTime: undefined,
        createdEndTime: undefined,
        accountStatus: undefined,
        invoiceCompanyIds: [],
        statuses: []
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑货物',
        create: '新增货物'
      },
      pvData: [],
      goodsTypeList: [],
      timeFrame: null,
      header: [
        {
          title: '全部',
          name: 'all'
        }, {
          title: '未审核',
          name: 'PENDING'
        }, {
          title: '审核通过',
          name: 'SUCCESS'
        }, {
          title: '审核不通过',
          name: 'FALL'
        }

      ],
      activeName: 'all',
      statusMapping: {
        PENDING: '待审核',
        SUCCESS: '审核通过',
        FAIL: '审核不通过'
      },
      userStatusMapping: {
        FROZEN: '已停用',
        ACTIVE: '启用中'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 新增
    addEnterprise() {
      this.$router.push({ path: '/userInfoManage/addEnterprise' })
    },
    // 搜索
    handleClick(e) {
      if (e.name === 'all') {
        this.listQuery.statuses = []
        this.getList()
      } else {
        this.listQuery.statuses = [e.name]
        this.getList()
      }
    },
    getList() {
      this.listLoading = true
      fetchEnterpriseList(this.listQuery).then((response) => {
        this.list = response.records
        this.list.map((item, index) => {
          item.sort = index + 1
        })
        this.total = response.total
        this.listLoading = false
      })
    },
    handleReset() {
      this.timeFrame = null
      this.listQuery = {
        current: 1,
        size: 20
      }
      this.timeFrame = ''
    },
    // 搜索
    handleSearch() {
      this.listQuery.current = 1
      if (!R.isNil(this.timeFrame) && this.timeFrame.length > 1) {
        this.listQuery.createdStartTime = parseTime(this.timeFrame[0])
        this.listQuery.createdEndTime = parseTime(this.timeFrame[1])
      }
      this.getList()
    },
    sortChange(data) {},
    // 新增弹窗
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    // 更新或者新增
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createEnterprise(this.temp).then((res) => {
            this.getList()
            this.dialogFormVisible = false
            const msg = this.dialogStatus === 'create' ? '添加成功' : '编辑成功'
            this.$notify({
              title: '成功',
              message: msg,
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 更新弹窗
    handleUpdate(row) {
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },

    handleDetail(row) {
      this.$router.push(`/userInfoManage/enterprise/${row.id}`)
    },
    // 处理删除选项
    handleDelete(row) {
      delEnterprise([row.id]).then(() => {
        this.getList()
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleAudit(row) {
      this.$router.push(`/userInfoManage/enterprise/${row.id}/audit`)
    },
    handleUpdateUserStatus(row, toStatus) {
      const data = {
        id: row.id,
        status: toStatus
      }
      updateUserStatus(data).then((response) => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.handleSearch()
      })
    }
  }
}
</script>

<style lang="scss">
.filter-container {
 display: flex;
 justify-content: flex-end;
 align-items: center;
 .align-items {
   margin-bottom: 0;
 }
}
.dialog-footer {
 display: flex;
 align-items: center;
 justify-content: center;
 button {
   width: 100px;
 }
}
</style>
